<template>
    <div>
        <div class="search">
            <el-input v-model.number="score" placeholder="请输入优势标准分" style="width:20%;margin-left:20px;" clearable @clear="handleClear"></el-input>
            <el-button class="searchbtn" type="primary" icon="el-icon-search" @click="getScore">确定</el-button>

            <el-input v-model.number="tid" placeholder="请输入教师ID" style="width:20%" clearable @clear="handleClear"></el-input>
            <el-button class="searchbtn" type="primary" icon="el-icon-search" @click="getData">查询</el-button>
        </div>

        <el-row class="chart">
            <el-col :span="4" v-for="(subject, index) in this.subjects" :key="subject" :offset="index > 0 ? 1 : 0">
                <el-card :body-style="{ padding: '0px' }">
                    <div :id="subject" style="height:300px;"></div>
                </el-card>
            </el-col>
        </el-row>
        <div id="bar" style="height: 400px;margin-top: 50px;"></div>
    </div>
</template>

<script>
import * as echarts from "echarts"
import { Message } from "element-ui";
import request from "@/utils/re_request"
export default {
    name:'analysis',
    data(){
        return {
            tid:'',
            // tid对应的教师信息
            score:'',//标准分
            teacher:{},
            // 优势科目分析数据
            data:{},
            // 优势科目展示
            subjects:['virtue', 'intelligence', 'sports', 'art', 'labor'],
            // 优势科目名称
            subjectsName:['德育', '智育', '体育', '美育', '劳育']
        }
    },
    watch:{
        data:{
            handler() {
                this.showPieChart()
                this.showBar()
            },
            deep:true,
        }
    },
    methods:{
        getData() {
            if(!Number.isInteger(this.tid)) {
                Message.error('请输入数字值！')
                return 
            }else {
                request.get(`/teacher/get?teacherID=${this.tid}`).then(
                    response => {
                        if(response.code === 600) {
                            this.teacher = response.data
                            // 查询对应教师班级的优势学生数据
                            this.getAdvantageSubjectData(this.tid)
                            // 展示饼图
                            this.showPieChart()
                            // 展示柱形图
                            this.showBar()
                            Message.success(response.msg)
                        } else {
                            Message.error(response.msg)
                        }
                    }
                )
            }
        },

        getScore(){
            if(!Number.isInteger(this.score)) {
                Message.error('请输入数字值！')
                return 
            }else {
                this.score = this.score
            }
        },
        // 展示个人成绩与班级平均成绩
        showPieChart() {
            for(var i = 0; i < this.subjects.length; i++) {
                var myChart = echarts.init(document.getElementById(this.subjects[i]));
                var option = {
                title: {
                    text: this.subjectsName[i], 
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    y:'top'
                },
                series: [
                    {
                    name: '人数',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '55%'],
                    label: {
                        //echarts饼图内部显示百分比设置
                        show: true,
                        position: "inside", //outside 外部显示  inside 内部显示
                        formatter: `{d}%`,
                        color: "#ffffff", //颜色
                        fontSize: 12 //字体大小
                    },
                    data: [
                        {
                            value: this.data[this.subjects[i]],
                            name: '优秀',
                            itemStyle: {
                                normal: {
                                    color: 'green',
                                    lineStyle: {
                                        color: 'green',
                                    }
                                },
                            }
                        },
                        {
                            value: this.data.totalNum - this.data[this.subjects[i]],
                            name: '一般',
                            itemStyle: {
                                normal: {
                                    color: 'gray',
                                    lineStyle: {
                                        color: 'gray',
                                    }
                                },
                            }
                        },
                    ]
                    }
                ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option)
            }

        },
        handleClear() {
            this.data = {}
            this.teacher = {}
            this.showAverage()
        },
        getAdvantageSubjectData(tid) {
            request.get(`/performance/as?tid=${tid}&score=${this.score}`).then(
                response => {
                    if(response.code === 600) {
                        this.data = response.data
                    }
                }
            )
        },
        // 班级各个学生
        showBar() {
            // 构造数据
            var source = [['product', '优秀', '一般']]
            for(var i = 0; i < this.subjects.length; i++) {
                var item = []
                item.push(this.subjectsName[i])
                item.push(this.data[this.subjects[i]])
                item.push(this.data.totalNum - this.data[this.subjects[i]])

                source.push(item)
            }
            
            var chartDom = document.getElementById('bar');
            var myChart = echarts.init(chartDom);
            var option = {
                title:{
                    text:this.teacher.username !== undefined ? this.teacher.username +'老师班级成绩分析' : '',
                    left:'center'
                },
                legend: {
                    x: '80%',
                    y:'left',
                },
                tooltip: {},
                dataset: {
                    source: source
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' }]
                };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
    
    },
    mounted(){
        this.showPieChart();
        this.showBar();
    }
}
</script>

<style>

    .search{
        margin: 20px 50px 0 50px;
    }

    .searchbtn{
        margin-left: 10px;
    }

    .chart{
        margin: 20px 50px 0 50px;
    }

</style>